{% extends "base_more.html" %}
{% block body %}
{% load i18n %}
       
<script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/4.2.1/echarts-en.js"></script> 
   
<div class="col-md-12"  style="margin-top:50px;"> 

  <div style= "display:inline">
   <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main1" style="width: 400px;height:340px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main1'));
 
        // 指定图表的配置项和数据
        var option = {
            
            //下载图片
            toolbox: {
    　　　　     show: true,
    　　        feature: {
    　　　　        saveAsImage: {
    　　　　          show:true,
    　　　　           excludeComponents :['toolbox'],
    　　　　           pixelRatio: 2
    　　　　        }
    　　        }
            },

            title: {
                text: 'ECharts 入门示例'
            },
            tooltip: {},
            legend: {
                data:['销量']
            },
            xAxis: {
                data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
 
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>                            
 </div>
 
 
  <div style= "display:inline">
   <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main2" style="width: 400px;height:340px;"></div>
   <script type="text/javascript">
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main2'));

  // 指定图表的配置项和数据
  var option = {
      tooltip : {
          trigger: 'item',
          formatter: "{a} <br/>{b} : {c} ({d}%)"
      },
      legend: {
          orient: 'vertical',
          left: 'left',
          data: ['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
      },
      series : [
          {
              name: '访问来源',
              type: 'pie',
              radius : '55%',
              center: ['50%', '60%'],
              data:[
                  {value:335, name:'直接访问'},
                  {value:310, name:'邮件营销'},
                  {value:234, name:'联盟广告'},
                  {value:135, name:'视频广告'},
                  {value:1548, name:'搜索引擎'}
              ],
              itemStyle: {
                  emphasis: {
                      shadowBlur: 10,
                      shadowOffsetX: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
              }
          }
      ]
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  </script>               
 </div>
 
  <div style= "display:inline">
   <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main3" style="width: 400px;height:340px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main3'));
 
        // 指定图表的配置项和数据
        var option = {
            grid: {
                top: '5%',
                right: '1%',
                left: '1%',
                bottom: '10%',
                containLabel: true
            },
            tooltip: {
                trigger: 'axis'
            },
            xAxis: {
                type: 'category',
                data: ['周一','周二','周三','周四','周五','周六','周日']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                name:'用户量',
                data: [820, 932, 901, 934, 1290, 1330, 1320],
                type: 'line',
                smooth: true
            }]
        };


        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>                        
  </div>  
 
 <div style= "display:inline">
   <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main4" style="width: 400px;height:340px;"></div>
  <script type="text/javascript">
  // 基于准备好的dom，初始化echarts实例
  var myChart = echarts.init(document.getElementById('main4'));

  // 指定图表的配置项和数据
  var option = {
      tooltip : {
          formatter: "{a} <br/>{b} : {c}%"
      },
      series: [
          {
              name: '硬盘使用量',
              type: 'gauge',
              detail: {formatter:'{value}%'},
              data: [{value: 88, name: '已使用'}]
          }
      ]
  };
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
  
   </script>
 </div>
 
</div>
 
{% endblock %}